<template>
  <div>
    <div id="safeCenter">
         <section class="order-main-header">
             <mt-header title="安全中心">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            </mt-header>
        </section>
        <div class="load-content">
            <div class="load-main">
                <div class="safe-level">
                    <p class="level-title">安全等级</p>
                    <div class="level-line">
                        <div class="level-point" :style="safeLevel.point"></div>
                        <div class="red-line" :style="safeLevel.redLine"></div>
                        <div class="level-word" :style="safeLevel.tip">{{safeLevel.word}}</div>
                    </div>
                    <div class="level-tip">
                        {{levelTip}}
                    </div>
                </div>
                <div class="safe-main">
                    <div v-for="(item,index) in safeArea" :key="index">
                        <p class="safe-area-title">
                            {{item[0]}}
                        </p>
                        <div class="safe-area-box">
                            <div class="safe-option" v-for="(j,n) in item[1]" :key="n" @click="jump(index,n)">
                                <span>{{j[0]}}</span>
                                <div :class="(!sessionData.mobile&&(j[0]=='手机验证')) || (!sessionData.email&&j[0]=='邮箱验证')?'safe-pic':''"><span :class="!sessionData.googleType&&(j[0]=='谷歌身份验证器')?'safe-google':''"   :style="{ 'color': hasSafe&&(j[0]=='资金密码'||j[0]=='登录密码')?'rgba(82, 152, 241, 1)':'',}">{{j[1][0]}}&nbsp;&nbsp;</span><img  :src="optionPic[`${(n+1)+(index*3)}`]"></div>
                            </div>
                        </div>
                    </div>
                </div>  
            </div>
        </div>  
    </div>
        <router-view class="quotation-router" :hasSafe="hasSafe" />
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';//导入toast组件
export default {
    data() {
        return{
            levelTip:"请至少开启两种安全验证",
            safeLevel:{
                point:'left:110px',
                redLine:'width:110px',
                tip:'left:100px;color:#FF3333',
                word:'低',
            },
             sessionData:'',
            safeArea:[
                [
                    '身份验证：',
                    [
                        [
                            '手机验证',
                            {
                                0: '',
                                1: '',
                            }
                        ],
                        [
                            '邮箱验证',
                            {
                                0: '',
                                1: '',
                            }
                        ],
                        [
                            '谷歌身份验证器',
                            {
                                0: ''
                            }
                        ]
                    ]
                ],
                [
                    '交易设置：',
                    [
                        [
                            '法币收款方式设置',
                            {
                                0: ''
                            }
                        ],
                        [
                            '资金密码',
                            {
                                0: '修改'
                            }
                        ],
                        [
                            '提币地址管理',
                            {
                                0: ''
                            }
                        ]
                    ]
                ],
                [
                    '其他设置：',
                    [
                        [
                            '登录密码',
                            {
                                0: '修改'
                            }
                        ],
                        // [
                        //     '手势密码',
                        //     {
                        //         0: ''
                        //     }
                        // ],
                        // [
                        //     '指纹密码',
                        //     {
                        //         0: ''
                        //     }
                        // ]
                    ]
                ],
            ],
            optionPic:{
                1:require('../../assets/safeCenter/arrow-right.png'),
                2:require('../../assets/safeCenter/arrow-right.png'),
                3:require('../../assets/safeCenter/arrow-right.png'),
                4:require('../../assets/safeCenter/arrow-right.png'),
                5:'',
                6:require('../../assets/safeCenter/arrow-right.png'),
                7:'',
                8:'',
                9:'',
            },
            hasSafe:false,
        }
    },
    methods:{
        jump(i,n) {
            let num = (n+1)+(i*3)
            switch(num){
                case 1:
                     if (this.sessionData.mobile) {
                        if (this.sessionData.loginName.search("@") > -1) {
                            this.$router.push('/safeCenter/phoneVal')
                        }
                     }else{
                         this.$router.push('/safeCenter/phoneVal');
                     }
                    break;
                case 2:
                      if (/^\d+$/.test(this.sessionData.loginName)) {
                            this.$router.push('/safeCenter/emailVal')
                           } 
                    break;
                case 3:
                    if(!this.sessionData.googleType){
                        this.$router.push('/safeCenter/googleVal')
                    }
                    break;
                case 4:
                    if(!this.sessionData.authDeep){
                       Toast("请先完成实名认证") ;
                       return;
                    }
                     this.$router.push('/safeCenter/otcPayment')
                    break;
                case 5:
                    this.$router.push('/safeCenter/safeword')
                    break;
                case 6:
                    this.$router.push('/safeCenter/address')
                    break;
                case 7:
                    this.$router.push('/safeCenter/password')
                    break;
            }
        },
          handleClose(){
                this.$router.go(-1);
            },
              getSession(){
        this.$http.get('/v1/session?'+ new Date().getTime(),{}).then(res=>{
            res = res.data
              let safeLevelData=0;
            if(res.code == 200){
                res = res.data;
                 this.sessionData=res;
                if(res.loginName.includes('@')){
                   this.optionPic[2]='';
                    this.safeArea[0][1][0][1][0] = res.mobile?'已设置':'未设置'
                    this.safeArea[0][1][1][1][0] = res.email?'已设置':'未设置'
                }else{
                    this.optionPic[1]='';
                    this.optionPic[2] = require('../../assets/safeCenter/arrow-right.png')
                    this.safeArea[0][1][0][1][0] = res.mobile?'已设置':'未设置'
                    this.safeArea[0][1][1][1][0] = res.email?'已设置':'未设置'
                }
                 res.mobile?safeLevelData++:'';
                res.email?safeLevelData++:'';
                if(res.googleType){
                    this.optionPic[3]='';
                }
                res.googleType?safeLevelData++:'';
                this.safeArea[0][1][2][1][0] = res.googleType?'已绑定':'去绑定'
                if(res.safeword){
                    this.hasSafe = true
                    this.safeArea[1][1][1][1][0] = '修改'
                }else{
                    this.hasSafe = false
                    this.safeArea[1][1][1][1][0] = '未设置'
                }
              if(safeLevelData==1){
                  this.safeLevel.word="低";
                  this.safeLevel.point="left:110px";
                  this.safeLevel.redLine="width:110px";
                  this.safeLevel.tip="left:110px;color:#FF3333";
              }else if(safeLevelData==2){
                  this.safeLevel.word="中";
                  this.safeLevel.point="left:220px";
                     this.safeLevel.redLine="width:220px";
                      this.safeLevel.tip="left:220px;color:#51D6AD";
              }else if(safeLevelData==3){
                  this.safeLevel.word="高";
                   this.safeLevel.point="left:330px";
                   this.safeLevel.redLine="width:330px";
                            this.safeLevel.tip="left:330px;color:#5298F1";
              }
            }
        }).catch()
        }
    },
    activated(){
    this.getSession();
    },
    mounted() {
    },
}
</script>

<style lang="less" scoped>
.order-main-header{
    padding-left: 30px;
    padding-right: 30px;
    height: 100px;
}
.mint-header{
    height: 100px;
    font-size: 32px;
    background-color: #161736;
    color: #E0E0F9
}
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    #safeCenter{
        height: 100%;
    }
    .quotation-router {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        overflow-y: auto;
        background-color: #161736;
    }
    #safeCenter{
        font-family:PingFang SC;
        font-weight:400;
    }
    .user-top {
        height: 110px;
        line-height: 110px;
        padding: 0 60px;
        background-color: #222240;
    }
    .safe-level{
        color: #8686C0;
        height: 230px;
        background: url("https://www.biplus.vip/upload/html/safe-icon.png") 100% no-repeat;
        background-position-x:317px;
        padding: 46px 0 0 29px;
        font-family:PingFang SC;
        font-weight:bold;
        .level-title{
            font-size: 32px;
            color:#E0E0F9;
        }
        .level-line{
            width: 394px;
            height: 2px;
            margin-top: 68px;
            background-color: #E5E5E5;
            position: relative;
            .level-point{
                width: 4px;
                height: 4px;
                border-radius:50%;
                border: 1px solid #FF3333;
                position: absolute;
                top: -1px;
            }
            .red-line{
                height: 2px;
                background-color: #FF3333;
            }
            .level-word{
                position: absolute;
                top: -35px;
            }
        }
        .level-tip{
            margin-top: 22px;
            font-size:22px;
            color:#8686C0;
        }
    }
    .safe-main{
        padding: 14px 0 0 30px;
        .safe-area-title{
            font-size:24px;
            margin-top: 46px;
            color:#8686C0;
        }
        .safe-area-box{
            margin-top: 19px;
            width: 690px;
            height: 272px;
            background-color: #222240;
            display: flex;
            flex-direction: column;
            line-height: 90px;
            padding-left: 21px;
            padding-right: 21px;
            color:#8686C0;
            .safe-option{
                flex:1;
                border-bottom: 1px solid #161736;
                display: flex;
                justify-content: space-between;
            }
        }
    }
    .safe-pic{
        color: #5298F1;
    }
    .safe-google{
        color: #F36D7D
    }
    .safe-main div:nth-child(3)  .safe-area-box{
        height: 100px;
    }
     .load-content{
           position: absolute;
           top:100px;
           bottom: 30px;
           overflow-y: scroll;
           -webkit-overflow-scrolling:touch
       }
       .load-main{
           height: 100%;
               margin-top: 30px;
       }
</style>